<template>
  <div>
    <!-- 表单设计编辑 -->
    <div v-if="formType === 1">
      <a-select
        v-model:value="setting.options.defaultValue"
        :disabled="setting.options.disabled"
        :placeholder="setting.options.placeholder"
        :style="{ width: setting.options.width + '%' }"
      >
        <a-select-option v-for="(item, index1) in setting.options.options" :key="index1" :value="item.value">
          {{ setting.options.showLabel ? item.label : item.value }}
        </a-select-option>
      </a-select>
    </div>
    <!-- 表单展示 -->
    <div v-else>
      <!-- 表单展示编辑 -->
      <div v-if="setting.fieldState === 0">
        <a-select
          :disabled="setting.options.disabled"
          :placeholder="setting.options.placeholder"
          :style="{ width: setting.options.width + '%' }"
          v-model:value="dataModel"
        >
          <a-select-option
            v-for="item in setting.options.remote ? setting.options.remoteOptions : setting.options.options"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label === undefined ? item.value : item.label }}
          </a-select-option>
        </a-select>
      </div>
      <!-- 表单展示只读 -->
      <div v-else>
        <a-input v-model:value="dataModel" style="display: none"> </a-input>
        {{ setting.options.defaultValue }}
      </div>
    </div>
  </div>
</template>
<script>
import { GetNames } from '@/api/dictionary/api'

export default {
  data() {
    return {
      dataModel: this.models[this.setting.table + '-' + this.setting.field],
    }
  },

  props: {
    formType: {
      type: Number,
      default: 0,
    },
    setting: {
      type: Object,
      default: null,
    },
    models: {
      type: Object,
      default: Object,
    },
  },
  created() {
    if (this.setting.fieldState !== 0) {
      GetNames({
        ids: this.dataModel,
      }).then((res) => {
        if (res.isSuccess) {
          this.setting.options.defaultValue = res.content
        }
      })
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.setting.table + '-' + this.setting.field] = val
      },
    },
  },
}
</script>